<template>
  <div class="form">
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left" class="label required">参加继续教育年度：</span>
        <xf-picker
          v-model="form.learnYear"
          ref="learnYear"
          :valid="[{required: true, msg: '请选择参加继续教育年度'}]"
          placeholder="请选择参加继续教育年度"
          slot="right"
          :list="years" />
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="label required">继续教育证书管理号：</span>
        <xf-input
          v-model.trim="form.certification"
          ref="certification"
          :valid="[{required: true, msg: '请填写继续教育证书管理号'}, {reg: /^.{0,20}$/, msg: '继续教育证书管理号不超过20个字符'}]"
          slot="right"
          placeholder="请填写继续教育证书管理号" />
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="label required">附件：</span>
        <div class="img-box" slot="right">
          <upload-image
            v-model="form.file"
            ref="file"
            required="请选择附件"
            file-name="附件"
            type="20" />
        </div>
      </yd-cell-item>
    </yd-cell-group>
    <div class="right-bottom">
      <mt-button type="default" size="small" @click="cancel">取消</mt-button>
      <mt-button type="primary" size="small" @click="onSubmit">保存</mt-button>
    </div>
  </div>
</template>

<script>
  import XfPicker from '../../../components/xf-picker/xf-picker'
  import XfInput from '../../../components/xf-input/xf-input'
  import UploadImage from '../../../components/upload-image/upload-image'
  import {validate} from '../../../common/js/util'

  export default {
    name: 'edu-record',
    components: {UploadImage, XfInput, XfPicker},
    props: {
      value: {
        type: null,
        default: ''
      },
      detail: {
        type: null,
        default: () => { return {} }
      }
    },
    computed: {
      years: {
        get() {
          const now = new Date().getFullYear()
          const years = []
          for (let i = 0; i < 50; i++) {
            years.push({name: now - i, value: now - i})
          }
          return years
        }
      }
    },
    data() {
      return {
        form: {
          id: '',
          learnYear: '',
          certification: '',
          file: ''
        }
      }
    },
    methods: {
      cancel() {
        this.$emit('cancel')
      },
      onSubmit() {
        validate.call(this, this.form).then(() => {
          this.$emit('submit', {
            ...this.form.file,
            id: '',
            learnYear: this.form.learnYear,
            certification: this.form.certification
          })
        })
      }
    },
    created() {
      if (this.detail) {
        this.form.learnYear = this.detail.learnYear
        this.form.certification = this.detail.certification
        this.form.file = this.detail
      }
    }
  }
</script>
<style scoped lang="scss">
  .img-box{
    justify-content: flex-start;
    padding: .2rem 0;
    width: 100%;
    .upload-img{
      width: 2.2rem;
    }
  }
</style>
